<template>
  <div class="newSong_container">
    <div class="newSong_container_head">
      <div class="newSong_container_head_contact">
        <div
          @click="changePage(item.id)"
          :class="{
            newSong_container_head_inside_active: item.id == activeNum,
          }"
          class="newSong_container_head_inside"
          v-for="item in title"
          :key="item.id"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div v-if="activeNum == 1">
      <div class="newSong_container_XingGe">
        <div class="newSong_container_XingGe_head">
          <div class="newSong_container_XingGe_head_left">
            <div
              :class="{
                newSong_container_XingGe_head_left_active:
                  item.id == activeNum2,
              }"
              class="newSong_container_XingGe_head_left_inside"
              v-for="item in newSong"
              :key="item.id"
              @click="changeSimg(item.id)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div v-loading="domLoading" class="newSong_container_NeiRong">
        <div
          class="newSong_container_NeiRong_inside"
          v-for="(item, index) in info"
          :key="index"
        >
          <div class="newSong_container_NeiRong_number">
            {{ index + 1 }}
          </div>
          <div class="newSong_container_NeiRong_img">
            <div
              @click="
                boFangSing(item.name, item.artists, item.album.picUrl, item.id)
              "
              class="newSong_container_NeiRong_img_bg"
              :style="{
                'background-image': 'url(' + item.album.picUrl + ')',
              }"
            >
              <div class="newSong_container_NeiRong_img_png">
                <img src="../../../../assets/bofang2.png" />
              </div>
            </div>
            <div class="newSong_container_NeiRong_img_text">
              {{ item.name }}
            </div>
          </div>
          <div class="newSong_container_NeiRong_art">
            <span
              v-for="(childItem, index) in item.artists"
              :key="childItem.id"
            >
              {{
                (index == item.artists.length - 1 && childItem.name) ||
                  childItem.name + "/"
              }}
            </span>
          </div>
          <div class="newSong_container_NeiRong_ZuoPing">
            {{ item.album.name }}
          </div>
          <div class="newSong_container_NeiRong_time">
            {{ times(item.duration) }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="activeNum == 2">
      <div class="newSong_container_XingGe">
        <div class="newSong_container_XingGe_head">
          <div
            class="newSong_container_XingGe_head_left"
            style="align-items: center"
          >
            <div
              :class="{
                newSong_container_XingGe_head_left_active:
                  item.id == activeNum3,
              }"
              class="newSong_container_XingGe_head_left_inside"
              v-for="item in newSong2"
              :key="item.id"
              @click="changeSing2(item.id)"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="newSong_container_XingGe_head_right">
            <el-date-picker
              value-format="yyyy-MM"
              @change="changeDate"
              v-model="yearAndMonth"
              type="month"
              placeholder="选择月"
            >
            </el-date-picker>
            <div class="newSong_container_right_inside">
              <div
                @click="changeActiveNum4(item.id)"
                :class="{
                  newSong_container_right_inside_text_active:
                    item.id == activeNum4,
                }"
                class="newSong_container_right_inside_text"
                v-for="(item, index) in typeArray"
                :key="index"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="newSong_container_XingGe_contact" v-loading="domLoading2">
        <div
          class="newSong_container_XingGe_contact_inside"
          @click="goToGeDanInfo(item.id)"
          v-for="(item, index) in monthData"
          :key="index"
        >
          <div class="newSong_container_XingGe_contact_inside_img">
            <el-image
              style="width: 100%; height: 100%;cursor: pointer;"
              lazy
              :src="item.blurPicUrl"
            >
            </el-image>
            <div class="bofang_hover">
              <img src="../../../../assets/bofang2.png" />
            </div>
          </div>
          <div class="newSong_container_XingGe_contact_inside_title">
            {{ item.name }}
          </div>
          <div class="newSong_container_XingGe_contact_out">
            <span
              class="newSong_container_XingGe_contact_inside_name"
              v-for="(childItem, index) in item.artists"
              :key="childItem.id"
            >
              {{
                (index == item.artists.length - 1 && childItem.name) ||
                  childItem.name + "/"
              }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { boFangSing } from "../../../../common/mixin/commonJs";
import { toSong, toAlbum } from "../../../../api/index";
export default {
  mixins: [boFangSing],
  inject: ["reload"],
  created() {
    this.domLoading = true;
    toSong({
      type: 0,
    }).then((res) => {
      this.info = res.data;
      toAlbum(this.toAlbumInfo).then((res) => {
        this.monthData = res.monthData.slice(0, 100);
        this.domLoading = false;
      });
    });
  },
  data() {
    return {
      toAlbumInfo: {
        area: "ALL",
        type: "new",
      },
      monthData: [],
      yearAndMonth: "",
      domLoading2: false,
      domLoading: false,
      allInfo: [],
      info: [],
      activeNum: 1,
      activeNum2: 0,
      activeNum3: "ALL",
      activeNum4: "new",
      typeArray: [
        {
          name: "全部",
          id: "new",
        },
        {
          name: "热门",
          id: "hot",
        },
      ],
      title: [
        {
          name: "新歌速递",
          id: 1,
        },
        {
          name: "新碟上架",
          id: 2,
        },
      ],
      newSong: [
        {
          name: "全部",
          id: 0,
        },
        {
          name: "华语",
          id: 7,
        },
        {
          name: "欧美",
          id: 96,
        },
        {
          name: "日本",
          id: 8,
        },
        {
          name: "韩国",
          id: 16,
        },
      ],
      newSong2: [
        {
          name: "全部",
          id: "ALL",
        },
        {
          name: "华语",
          id: "ZH",
        },
        {
          name: "欧美",
          id: "EA",
        },
        {
          name: "日本",
          id: "JP",
        },
        {
          name: "韩国",
          id: "KR",
        },
      ],
    };
  },
  methods: {
    goToGeDanInfo(id) {
      this.$router.push({
        path: "/zhuanJi",
        query: {
          id
        },
      });
    },
    times(time) {
      const hour =
        parseInt(time / 3600) < 10
          ? "0" + parseInt(time / 3600)
          : parseInt(time / 3600);
      const min =
        parseInt((time % 3600) / 60) < 10
          ? "0" + parseInt((time % 3600) / 60)
          : parseInt((time % 3600) / 60);
      const sec =
        parseInt((time % 3600) % 60) < 10
          ? "0" + parseInt((time % 3600) % 60)
          : parseInt((time % 3600) % 60);
      return hour + ":" + min + ":" + sec;
    },
    changeSimg(id) {
      this.domLoading = true;
      this.activeNum2 = id;
      toSong({
        type: id,
      }).then((res) => {
        this.info = res.data;
        this.domLoading = false;
      });
    },
    changeSing2(id) {
      this.domLoading2 = true;
      this.activeNum3 = id;
      this.toAlbumInfo.area = id;
      toAlbum(this.toAlbumInfo).then((res) => {
        this.monthData = res.monthData.slice(0, 100);
        this.domLoading2 = false;
      });
    },
    changePage(id) {
      this.activeNum = id;
    },
    changeActiveNum4(id) {
      this.domLoading2 = true;
      this.activeNum4 = id;
      this.toAlbumInfo.type = id;
      toAlbum(this.toAlbumInfo).then((res) => {
        this.monthData = res.monthData.slice(0, 100);
        this.domLoading2 = false;
      });
    },
    changeDate(e) {
      if (e == null) {
        this.reload();
      } else {
        this.domLoading2 = true;
        this.toAlbumInfo.year = e.slice(0, 4);
        this.toAlbumInfo.month = e.slice(5, 7);
        toAlbum(this.toAlbumInfo).then((res) => {
          this.monthData = res.monthData.slice(0, 100);
          this.domLoading2 = false;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../common/css/commonStyle";

.newSong_container {
  width: 100%;

  .newSong_container_head {
    width: 100%;
    @include flex;
    height: 60px;

    //background: yellow;
    .newSong_container_head_contact {
      width: 220px;
      height: 30px;
      //background: wheat;
      border-radius: 50px;
      border: 1px solid rgb(218, 212, 212);
      display: flex;

      .newSong_container_head_inside {
        width: 50%;
        height: 100%;
        border-radius: 50px;
        //background: violet;
        @include flex;
        font-size: 12px;
        cursor: pointer;
      }

      .newSong_container_head_inside_active {
        background: rgb(184, 180, 184);
        color: white;
      }
    }
  }

  .newSong_container_XingGe {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;

    .newSong_container_XingGe_head {
      width: 94%;
      display: flex;
      justify-content: space-between;

      .newSong_container_XingGe_head_left {
        width: 32%;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: rgb(163, 159, 163);

        .newSong_container_XingGe_head_left_inside {
          cursor: pointer;
        }
      }

      .newSong_container_XingGe_head_right {
        width: 40%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .newSong_container_right_inside {
          display: flex;
          justify-content: space-between;
          width: 100px;

          .newSong_container_right_inside_text {
            font-size: 12px;
            width: 40px;
            height: 16px;
            border-radius: 5px;
            @include flex;
            cursor: pointer;
          }

          .newSong_container_right_inside_text_active {
            color: $wangYiYunColor;
            background: rgb(233, 207, 207);
          }
        }
      }

      .newSong_container_XingGe_head_left_active {
        color: black;
        font-weight: 600;
      }
    }
  }

  .newSong_container_XingGe_contact {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .newSong_container_XingGe_contact_inside {
      width: 21%;
      margin-bottom: 15px;
      cursor: pointer;

      .newSong_container_XingGe_contact_inside_img {
        width: 100%;
        height: 160px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-bottom: 10px;

        .bofang_hover {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: white;
          bottom: 110px;
          left: 50px;
          position: relative;
          opacity: 0;
          transition: opacity 0.5s;
          @include flex;
        }
      }

      .bofang_hover:hover {
        opacity: 1;
      }

      .newSong_container_XingGe_contact_inside_title {
        @include white_space;
        font-weight: 200;
        margin-bottom: 5px;
      }

      .newSong_container_XingGe_contact_out {
        @include white_space;

        .newSong_container_XingGe_contact_inside_name {
          font-weight: 200;
          font-size: 12px;
          color: rgb(184, 172, 172);
        }
      }
    }
  }

  .newSong_container_NeiRong {
    width: 100%;

    .newSong_container_NeiRong_inside {
      width: 100%;
      height: 100px;
      //background: blue;
      display: flex;

      .newSong_container_NeiRong_number {
        height: 100%;
        width: 10%;
        //background: red;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
      }

      .newSong_container_NeiRong_img {
        height: 100%;
        width: 40%;
        //background: yellow;
        display: flex;
        align-items: center;

        .newSong_container_NeiRong_img_bg {
          width: 85px;
          height: 85%;
          //background: green;
          border-radius: 5px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          @include flex;
          cursor: pointer;

          .newSong_container_NeiRong_img_png {
            width: 35px;
            height: 35px;
            background: white;
            border-radius: 50%;
            @include flex;
          }
        }

        .newSong_container_NeiRong_img_text {
          margin-left: 10px;
        }
      }

      .newSong_container_NeiRong_art {
        height: 100%;
        width: 15%;
        //background: pink;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        @include white_space;
      }

      .newSong_container_NeiRong_ZuoPing {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        height: 100%;
        width: 20%;
        //background: orange;
        @include white_space;
      }

      .newSong_container_NeiRong_time {
        height: 100%;
        width: 15%;
        // background: rgb(68, 47, 8);
        @include flex;
        font-size: 13px;
      }
    }
  }
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}</style
>>
